
import { Layout, Menu,Dropdown, Button,Modal} from 'antd';
import { IRouteComponentProps, Link } from 'umi';
import React, { useState } from 'react';
import styles from './index.less'
import './index.less'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  ContainerOutlined,
  SmileOutlined,
} from '@ant-design/icons';
import Cookies from 'js-cookie';
const { SubMenu } = Menu

const { Header, Sider, Content } = Layout;


const whiteList = ['/login']
function Layouts(this: any, { children, location, route, history, match }: IRouteComponentProps) {
  // 修改密码弹窗
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  // 退出登录
  const exitLogin = ()=>{
    Cookies.remove('Authorization')
  }
  const menu = (
    <Menu
      items={[
        {
          label: (
            <a  rel="noopener noreferrer" onClick={showModal}>
              修改密码
            </a>
          ),
        },
        {
          label: (
            <a onClick={exitLogin} rel="noopener noreferrer" href="/login">
              退出登录
            </a>
          ),
        },
      ]}
    />
  );
  let body = children;
  if (whiteList.indexOf(location.pathname) !== -1) {
    return <div className="container content">
      {body}
    </div>
  }

  let [collapsed, setCollapsed] = useState(false)
  localStorage.setItem('collapsed', collapsed as unknown as string)
  function toggle() {
    setCollapsed(!collapsed)
  }
  return <Layout>
    <Sider className={styles.menu} trigger={null} collapsible collapsed={collapsed}>
      <div className="logo" />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} >
        <div className={styles.title}>
          <a href="">电商运营后台</a>
        </div>
        <Menu.Item key="1" icon={<SmileOutlined />}>
          <Link to={'/'}>首页</Link>
        </Menu.Item>
        <SubMenu key="sub1" icon={<UserOutlined />} title="产品管理">
          <Menu.Item key="2">
            <Link to={'/prod-prodTag'}>分组管理</Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link to={'/prod-prodList'}>产品管理</Link>
          </Menu.Item>
          <Menu.Item key="4">
            <Link to={'prod-category'}>分类管理</Link>
          </Menu.Item>
          <Menu.Item key="5">
            <Link to={'/prod-prodComm'}>评论管理</Link>
          </Menu.Item>
          <Menu.Item key="6">
            <Link to={'/prod-spec'}>规格管理</Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<UserOutlined />} title="门店管理">
          <Menu.Item key="7">
            <Link to={'/shop-notice'}>公告管理</Link>
          </Menu.Item>
          <Menu.Item key="8">
            <Link to={'/article/category'}>分类管理</Link>
          </Menu.Item>
          <Menu.Item key="9">
            <Link to={'/article/category'}>分类管理</Link>
          </Menu.Item>
          <Menu.Item key="10">
            <Link to={'/article/category'}>分类管理</Link>
          </Menu.Item>
          <Menu.Item key="11">
            <Link to={'/article/category'}>分类管理</Link>
          </Menu.Item>
          <Menu.Item key="12">
            <Link to={'/article/category'}>分类管理</Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu key="sub3" icon={<UserOutlined />} title="会员管理">
          <Menu.Item key="13">
            <Link to={'/article'}>所有文章</Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu key="sub4" icon={<UserOutlined />} title="订单管理">
          <Menu.Item key="14">
            <Link to={'/article'}>所有文章</Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu key="sub5" icon={<UserOutlined />} title="系统管理">
          <Menu.Item key="18">
            <Link to={'/sys-area'}>地址管理</Link>
          </Menu.Item>
          <Menu.Item key="15">
            <Link to={'/sys-config'}>参数管理</Link>
          </Menu.Item>
          <Menu.Item key="16">
            <Link to={'/sys-schedule'}>定时管理</Link>
          </Menu.Item> <Menu.Item key="17">
            <Link to={'/sys-menu'}>菜单管理</Link>
          </Menu.Item>   
          <Menu.Item key="19">
            <Link to={'/sys-user'}>管理员列表</Link>
          </Menu.Item>
          <Menu.Item key="20">
            <Link to={'/sys-role'}>角色管理</Link>
          </Menu.Item>      
        </SubMenu>
      </Menu>
    </Sider>
    <Layout className="site-layout">
      <Header className="site-layout-background" style={{ padding: 0 }}>
      <Dropdown overlay={menu} placement="bottom" arrow>
      <Button className="userBtn">admin</Button>
    </Dropdown>
    <Modal title="修改密码" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p><span>账&emsp;&emsp;户</span>&emsp;<span>admin</span></p>
        <p><span>原密码&emsp;</span>&emsp;<input type="text"/></p>
        <p><span>新密码&emsp;</span>&emsp;<input type="text"/></p>
        <p><span>确认密码</span>&emsp;<input type="text"/></p>
      </Modal>
        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
          className: 'trigger',
          onClick: toggle,
        })}
        {/* <CommonHerder></CommonHerder> */}
      </Header>
      <div className={styles.main}>
        {body}
      </div>
    </Layout>
  </Layout>

}
export default Layouts